    <template>
    <div class="mod-order" style="margin: 10px">
        <!--查询面板-->
        <SearchPanel
            ref="searchPanel"
            :search-config="searchConfig"
            @showDialog="showDialog"
            @startSearch="startSearch"
            :selectOptions="selectOptions"
        >
            <el-form-item>
                <el-button icon="el-icon-plus" type="primary" size="mini" @click="add">新增</el-button>
            </el-form-item>
            <el-form-item>
                <el-button icon="el-icon-upload" type="primary" size="mini" @click="exportExcel">导出</el-button>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="danger"
                    size="mini"
                    @click="batchDel"
                    :disabled="selectDataList.length==0"
                >批量删除</el-button>
            </el-form-item>
        </SearchPanel>

        <!-- 查询结果 -->
        <ResultListPanel
            tableRef="table"
            ref="multipleTable"
            :checkBoxEnable="true"
            :data="dataList?dataList:[]"
            :listConfig="resultColConfig"
            :listLoading="listLoading"
            @actionClick="actionClick"
            @paginationChange="paginationChange"
            :tagTextExchange="tagTextExchange"
            @selectionChange="selectionChange"
        >
            <div slot="slot7">
                <el-table-column
                    align="center"
                    min-width="80px"
                    label="教师端"
                    prop="accountTypeSupport"
                >
                    <template slot-scope="scope">
                        <p
                            style="color:red;font-size:18px"
                            v-if="dataList[scope.$index]['accountTypeSupport']==''"
                        >√</p>
                        <p
                            v-else
                            style="color:red;font-size:18px"
                        >{{dataList[scope.$index]['accountTypeSupport'].split(',') | accountTypeSupport1}}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    min-width="80px"
                    label="学生端"
                    prop="accountTypeSupport"
                >
                    <template slot-scope="scope">
                        <p
                            style="color:red;font-size:18px"
                            v-if="dataList[scope.$index]['accountTypeSupport']==''"
                        >√</p>
                        <p
                            v-else
                            style="color:red;font-size:18px"
                        >{{dataList[scope.$index]['accountTypeSupport'].split(',') | accountTypeSupport2}}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    min-width="80px"
                    label="家长端"
                    prop="accountTypeSupport"
                >
                    <template slot-scope="scope">
                        <p
                            style="color:red;font-size:18px"
                            v-if="dataList[scope.$index]['accountTypeSupport']==''"
                        >√</p>
                        <p
                            v-else
                            style="color:red;font-size:18px"
                        >{{dataList[scope.$index]['accountTypeSupport'].split(',') | accountTypeSupport3}}</p>
                    </template>
                </el-table-column>
            </div>
        </ResultListPanel>
        <addOrUpdate ref="addOrUpdateDom" @refreshDataList="getList" v-show="visible" />
        <schollDialog ref="school" @scelecSchool="scelecSchool" :isMoreSelect="isMoreSelect"/>
    </div>
</template>
      

    
    <script>
import { INDEX_SEARCH_RESULT_ITEMS, INDEX_SEARCH_ITEMS } from './config';
import ResultListPanel from '../../components/ResultListPanel';
import SearchPanel from '../../components/SearchPanel';
import API from '@/api';
import cloneDeep from 'lodash/cloneDeep';
import addOrUpdate from './add-or-update';
import schollDialog from '../../components/schoolSelect/index';

export default {
    components: {
        ResultListPanel,
        SearchPanel,
        addOrUpdate,
        schollDialog
    },

    filters: {
        accountTypeSupport1(val) {
            var flag = '';
            if (val.length > 0) {
                for (var k in val) {
                    if (val[k] == 1) {
                        flag = '√';
                    }
                }
            }
            return flag;
        },
        accountTypeSupport2(val) {
            var flag = '';
            if (val.length > 0) {
                for (var k in val) {
                    if (val[k] == 2) {
                        flag = '√';
                    }
                }
            }
            return flag;
        },
        accountTypeSupport3(val) {
            var flag = '';
            if (val.length > 0) {
                for (var k in val) {
                    if (val[k] == 3) {
                        flag = '√';
                    }
                }
            }
            return flag;
        }
    },
    data() {
        var appidValdate = (rule, value, callback) => {
            var regex = /^[0-9a-zA-Z]{3,8}$/g;
            if (!regex.test(value)) {
                callback(new Error('请输入正确的appid'));
            } else {
                callback();
            }
        };
        return {
            selectOptions: {
                appId: []
            },
            isMoreSelect:false,//只能单选
            visible: false,
            selectDataList: [],
            // 搜索项配置
            searchConfig: INDEX_SEARCH_ITEMS,
            resultColConfig: INDEX_SEARCH_RESULT_ITEMS,
            listLoading: false, // 数据列表显示状态
            dataList: [], //  数据列表
            /* 分页查询数据 */
            pageSize: 10,
            pageNum: 1,
            totalPage: 0,
            /* 查询条件参数 */
            dataForm: {
                name: '',
                appId: ''
            },
            type: 1
        };
    },
    mounted() {
        this.mobileList();
    },
    methods: {
        showDialog(e) {
            this.$refs.school.init();
            console.log(e);
        },
        // 导出EXCEL表
        exportExcel() {
            
            var data = {
                schoolId: this.dataForm.schoolId,
                appId: this.dataForm.appId,
                accessToken:sessionStorage.getItem('accessToken')
            };
            this.listLoading = true;
            API.menu
                .exportFunctionExcel(data)
                .then(res => {
                    this.listLoading = false;
                    var fileDownload = require('js-file-download');
                    let fileName = '功能池报表.xls';
                    fileDownload(res, fileName);
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        // 选中的学校数据
        scelecSchool($event) {
            console.log($event);
            this.$set(this.$refs.searchPanel['dataForm'], 'name', $event[0].name);
            this.$set(this.$refs.searchPanel['dataForm'], 'schoolId', $event[0].schoolId);
        },
        /***
         * 搜索面板出发搜索事件
         * @param params
         */
        startSearch(params) {
            this.dataForm = params;
            this.pageNum = 1;
            this.$set(this.$refs.multipleTable['pageParams'], 'pageNum', 1);

            this.getList();
        },
        selectionChange(val) {
            this.selectDataList = val;
        },
        // 手机应用系统
        mobileList() {
            this.listLoading = true;
            API.systemManger.systemList({ pageNum: 1, pageSize: 100 }).then(res => {
                this.listLoading = false;
                this.mobileList = res.data.rows;
                var list = res.data.rows;
                var newList = [];
                for (var k in list) {
                    newList.push({ value: list[k].appId, label: list[k].appName });
                }
                this.selectOptions['appId'] = newList;
                this.$set(this.$refs.searchPanel['dataForm'], 'appId', newList[0]['value']);
                this.dataForm['appId'] = newList[0]['value'];
                setTimeout(() => {
                    this.getList();
                }, 500);
            });
        },
        /***
         * 触发 行操作按钮
         * @param data
         * @param item
         */
        actionClick([data, item]) {
            console.log(item.alias);
            if (item.alias === 'edit') {
                this.Edit(data);
            } else if (item.alias === 'del') {
                this.sigleDel(data);
            } else if (item.alias == 'config') {
                this.$router.push({ path: '/menuBtn/index', query: { appId: this.dataForm.appId, pageId: data.moduleId,appType:'app' } });
            }
        },
        tagTextExchange([data, item]) {
            var status = '';
            var pushTypeTitle = '';
            if (item.alias == 'linkType') {
                if (data.linkType == 1) {
                    status = '原生';
                } else if (data.linkType == 2) {
                    status = 'H5';
                }
                return status;
            } else if (item.alias == 'pushType') {
                if (data.pushType == 'reddot') {
                    pushTypeTitle = '红点推送';
                } else if (data.pushType == 'notice') {
                    pushTypeTitle = '通知';
                } else if (data.pushType == 'sms') {
                    pushTypeTitle = '手机短信';
                } else if (data.pushType == 'wechat') {
                    pushTypeTitle = '微信推送';
                }
                return pushTypeTitle;
            }
        },

        add() {
            this.visible = true;
            this.$router.push({ path: '/appFunctionManger/addOrUpdate/index', query: { type: 1 } });
        },
        /**
         * 分页器发生改变
         * @param page
         */
        paginationChange(page) {
            this.pageSize = page.pageSize;
            this.pageNum = page.pageNo;
            this.getList();
        },

        // 单独删除
        sigleDel(row) {
            console.log(row);
            this.$alert('您确定要删除该条数据吗?', '', {
                confirmButtonText: '确定',
                callback: action => {
                    API.menu.siginFunctionMangerDel({ id: row.moduleId }).then(res => {
                        if (res.httpCode == 200) {
                            this.$message({
                                type: 'success',
                                message: `删除成功`
                            });
                            this.getList();
                        }
                    });
                }
            });
        },
        // 批量删除
        batchDel(row) {
            console.log(this.selectDataList);
            var ids = [];
            this.selectDataList.forEach((item, index) => {
                return ids.push(item.moduleId);
            });
            this.$alert('您确定要删除该数据吗?', '', {
                confirmButtonText: '确定',
                callback: action => {
                    API.menu.batchFunctionMangerDel(ids).then(res => {
                        if (res.code == 20000000) {
                            this.$message({
                                type: 'success',
                                message: `批量删除成功`
                            });
                            this.getList();
                        }
                    });
                }
            });
        },
        // 编辑
        Edit(data) {
            this.visible = true;
            this.$router.push({ path: '/appFunctionManger/addOrUpdate/index', query: { type: 2, id: data.moduleId } });
        },
        getList() {
            let params = cloneDeep(this.dataForm);
            console.log(params);
            params.pageNum = this.pageNum;
            params.pageSize = this.pageSize;
            delete params['name'];
            this.listLoading = true;
            API.menu.getFunctionMangerList(params).then(res => {
                if (res.code == 20000000) {
                    this.totalPage = res.data.total;
                    this.dataList = res.data.rows;
                    this.$set(this.$refs.multipleTable['pageParams'], 'total', res.data.total);
                } else {
                    this.totalPage = 0;
                    this.dataList = [];
                    this.$set(this.$refs.multipleTable['pageParams'], 'total', 0);
                }
                this.listLoading = false;
            });
        }
    }
};
</script>
    
    <style>
</style>